<template>
  <el-dialog v-model="dialogVisible" title="拆装箱明细" width="75%">
    <el-table
      :data="relatedRecords"
      highlight-current-row
      size="small"
      style="width: 100%"
    >
      <el-table-column label="物料编码" prop="invcode" />
      <el-table-column label="物料名称" prop="invname" />
      <el-table-column label="物料规格" prop="invspec" />
      <el-table-column label="物料型号" prop="invtype" />
      <el-table-column label="数量" prop="originalQty" />
      <el-table-column label="批次号" prop="invbatch" />
      <el-table-column label="创建人" prop="createUsername" />
      <el-table-column label="创建时间" prop="createTime" />
    </el-table>
  </el-dialog>
</template>

<script setup>
  import { ref } from 'vue'
  import { getBarcodeRelatedXcApi } from '@/api/kc/barcode_xc'

  const relatedRecords = ref()

  const dialogVisible = ref(false)
  const $baseMessage = inject('$baseMessage')

  const toOpenRelated = (row) => {
    dialogVisible.value = true
    getBarcodeRelatedXc(row.pkBarcodeXc)
  }
  const getBarcodeRelatedXc = async (pkBarcodeXc) => {
    const { code, msg, data } = await getBarcodeRelatedXcApi({
      pkBarcodeXc: pkBarcodeXc,
    })
    if (code === 2000) {
      relatedRecords.value = data
    } else {
      $baseMessage(msg, 'error')
    }
  }

  defineExpose({ toOpenRelated })
</script>
